<template>
    <div class="menuList" :style="styleVars">
        <div class="menu" v-for="(menu, index) in menuList" :class="{ selected: menu.selected }" :key="index">
            <div class="menuTitle" @click="($event)=>{
                if (!menu.children) {
                    handleItemClick(menu, null);
                } else {
                    if (menu.contract) childrenMenuShow($event);
                    else childrenMenuHide($event);
                    menu.contract = !menu.contract;
                }
            }">
                <div class="titleAndIcon">
                    <span class="titleIconfont iconfont" v-if="menu.icon" v-html="menu.icon"></span>
                    <span class="menuText">{{ menu.name }}</span>
                </div>
                <div class="arrowIconfont iconfont icon-likesprograma-shangyiye1" v-if="menu.children" :style="{ transform: (menu.contract ? 'rotate(0deg)' : 'rotate(-90deg)') }"></div>
            </div>
            <div class="childrenMenuList" v-if="menu.children" :style="{ height: (menu.contract ? '0px' : 'auto'), transition: '.3s all' }">
                <div class="childrenMenu" v-for="(child, childIndex) in menu.children" :class="{ selected: child.selected }" :key="childIndex">
                    <div class="clickFunction" @click="()=>{
                        handleItemClick(menu, child);
                    }">
                        <div class="titleAndIcon">
                            <span class="titleIconfont iconfont" v-if="child.icon && !child.isAvatar" v-html="child.icon"></span>
                            <img class="avatar" v-if="child.icon && child.isAvatar && !child.avatarRight" :src="child.icon" />
                            <span class="menuText" :class="{ noIconfont: !child.icon }">{{ child.name }}</span>
                            <img class="avatar" v-if="child.icon && child.isAvatar && child.avatarRight" :src="child.icon" />
                        </div>
                    </div>
                    <div class="menuButtons">
                        <div class="buttons">
                            <slot name="buttons" :menu="menu" :child="child"></slot>
                        </div>
                        <div class="hoverButtons">
                            <slot name="hoverButtons" :menu="menu" :child="child"></slot>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import { MenuListItem } from '@/types/MenuListItem';

export default defineComponent({
    name: 'menuList'
});
</script>

<script setup lang="ts">
    // 定义 emits
    const emit = defineEmits(['itemClick']);

    // 定义props
    const props = withDefaults(defineProps<{
        fontSize?: number;      // 字体大小
        menuList?: MenuListItem[];
    }>(), {
        fontSize: 14,
        menuList: ()=>[]
    });

    // 计算样式变量
    const styleVars = computed(() => ({
        '--font-size': `${props.fontSize}px`,
        '--icon-font-size': `${props.fontSize + 10}px`,
        '--children-icon-font-size': `${props.fontSize + 8}px`,
        '--padding': `${props.fontSize / 2}px`
    }));

    const childrenMenuShow = (event) => {
        const arrowIconfont = event.currentTarget.querySelector('.arrowIconfont');
        const childrenMenuList = event.currentTarget.nextElementSibling;
        childrenMenuList.style.transition = 'none';
        childrenMenuList.style.height = 'auto';
        const height = childrenMenuList.offsetHeight;
        childrenMenuList.offsetHeight; // Trigger reflow
        requestAnimationFrame(() => {
            childrenMenuList.style.height = 0;
            childrenMenuList.style.transition = '.3s all';
            childrenMenuList.offsetHeight; // Trigger reflow
            requestAnimationFrame(() => {
                arrowIconfont.style.transform = 'rotate(-90deg)'; // 旋转箭头
                childrenMenuList.style.height = `${height}px`;
                childrenMenuList.offsetHeight; // Trigger reflow
            });
        });
    };

    const childrenMenuHide = (event) => {
        const arrowIconfont = event.currentTarget.querySelector('.arrowIconfont');
        const childrenMenuList = event.currentTarget.nextElementSibling;
        childrenMenuList.style.transition = 'none';
        childrenMenuList.style.height = 'auto';
        const height = childrenMenuList.offsetHeight;
        childrenMenuList.style.height = `${height}px`;
        childrenMenuList.style.transition = '.3s all';
        childrenMenuList.offsetHeight; // Trigger reflow
        requestAnimationFrame(() => {
            arrowIconfont.style.transform = 'rotate(0deg)'; // 旋转箭头
            childrenMenuList.style.height = 0;
            childrenMenuList.offsetHeight; // Trigger reflow
        });
    };

    // 处理点击事件
    const handleItemClick = (menu: MenuListItem, child: MenuListItem | null) => {
        // 只有当点击的项未被选中时才执行清除操作
        if (!child?.selected || !menu.selected) {
            props.menuList.forEach(menu => {
                menu.selected = false;
                if (menu.children) {
                    menu.children.forEach(child => {
                        child.selected = false;
                    });
                }
            });
            // 设置选中
            menu.selected = true;
            if (child) child.selected = true;
        }
        // 触发点击事件
        emit('itemClick', child || menu);
    };
</script>

<style src="@/assets/icons/iconfont.css" scoped></style>

<style scoped>
.menuList {
    width: 100%;
    position: relative;
}

.menuList .menu {
    width: 100%;
    box-shadow: inset 0px -3px 5px -5px rgba(0, 0, 0, 0.1);
}

.menuList .menu:hover .menuTitle  {
    color: rgba(65, 185, 255, 1);
}
.menuList .menu.selected .menuTitle {
    color: rgba(65, 185, 255, 1);
}


/* 标题 图标 和 文字 的 大小 和 间距 */
.menuList .menu .menuText {
    font-size: var(--font-size);
    padding: 0px var(--padding);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.menuList .menu .titleIconfont {
    padding-left: var(--padding);
    font-size: var(--icon-font-size);
}

.menuList .menu .menuTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2px 0px;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    -moz-backdrop-filter: blur(2rem);
    -ms-backdrop-filter: blur(2rem);
    border-bottom: 1px solid rgba(230, 230, 230, .5);
    transition: all .3s;
}
.menuList .menu .titleAndIcon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 80%;
    padding: 6px 0px;
}

/* 箭头 的 大小 和 间距 */
.menuList .menu .menuTitle .arrowIconfont {
    font-size: var(--font-size);
    margin-right: var(--font-size);
    transition: .3s all;
}

.menuList .menu .childrenMenuList {
    width: 100%;
    overflow: hidden;
    transition: .3s all;
}

.menuList .menu .childrenMenuList .childrenMenu {
    width: 100%;
    position: relative;
    transition: all .3s;
}
.menuList .menu .childrenMenuList .childrenMenu:hover {
    color: rgba(65, 185, 255, 1);
    background-color: rgba(200, 200, 255, .2);
}
.menuList .menu .childrenMenuList .childrenMenu.selected {
    color: rgba(65, 185, 255, 1);
    background-color: rgba(200, 200, 255, .2);
}
.menuList .menu .childrenMenuList .childrenMenu.selected .titleAndIcon .avatar {
    border: 1px solid rgba(65, 185, 255, 1);
}
.menuList .menu .childrenMenuList .childrenMenu:hover .titleAndIcon .avatar {
    border: 1px solid rgba(65, 185, 255, 1);
}
.menuList .menu .childrenMenuList .childrenMenu:active {
    background-color: rgba(200, 200, 255, .3);
    transition: all .1s;
}
.menuList .menu .childrenMenuList .childrenMenu .clickFunction {
    position: relative;
    width: 100%;
}

/* 子菜单按钮 */
.menuList .menu .childrenMenuList .childrenMenu .menuButtons {
    position: absolute;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 20%;
    height: 100%;
    right: 0px;
    top: 0px;
}
.menuList .menu .childrenMenuList .childrenMenu:hover .hoverButtons {
    display: flex;
}
.menuList .menu .childrenMenuList .childrenMenu .hoverButtons  {
    display: none;
}

/* 子菜单 的 大小 和 间距 */
.menuList .menu .childrenMenuList .childrenMenu .titleAndIcon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.menuList .menu .childrenMenuList .childrenMenu .titleAndIcon .titleIconfont {
    padding-left: var(--font-size);
    font-size: var(--children-icon-font-size);
}

.menuList .menu .childrenMenuList .childrenMenu .titleAndIcon .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, .1);
}

/* 左侧头像的样式 */
.menuList .menu .childrenMenuList .childrenMenu .titleAndIcon .avatar:not(:last-child) {
    margin-left: var(--font-size);
    margin-right: var(--padding);
}

/* 右侧头像的样式 */
.menuList .menu .childrenMenuList .childrenMenu .titleAndIcon .avatar:last-child {
    margin-left: auto;
    margin-right: var(--font-size);
}

.menuList .menu .childrenMenuList .childrenMenu .titleAndIcon .menuText {
    font-size: var(--font-size);
    flex: 1;  /* 让文本占据剩余空间 */
}

.menuList .menu .childrenMenuList .childrenMenu .titleAndIcon .noIconfont {
    padding-left: var(--font-size);
}
.menuList .menu .childrenMenuList .childrenMenu .menuButtons {
    font-size: var(--font-size);
    padding-right: var(--padding);
}
</style>
